<!DOCTYPE html>
<html>
<head>
	<title>css卡牌布局</title>
	<link rel="stylesheet" type="text/css" href="../joyKit.css">
	<link rel="stylesheet" type="text/css" href="../flex-box.css">
	<link rel="stylesheet" type="text/css" href="index.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<section class="sec1 xh-screen"> 
		<ul class="row">
			<li class="col-md-3">
				<div class="outer">
					<div class="pic">
						<span class="img img1"></span>
					</div>
					<div class="title">
						<span>喵喵</span>
						<small>小喵喵</small>
					</div>
					<ul class="meun" layout="row stretch-stretch">
						<li><button>1</button></li>
						<li><button>2</button></li>
						<li><button>3</button></li>
						<li><button>4</button></li>
					</ul>
				</div>
			</li>
			<li class="col-md-3">
				<div class="outer">
					<div class="pic">
						<div class="img img2"></div>
					</div>
					<div class="title">
						<span>喵喵</span>
						<small>小喵喵</small>
					</div>
					<ul class="meun" layout="row stretch-stretch">
						<li><button>1</button></li>
						<li><button>2</button></li>
						<li><button>3</button></li>
						<li><button>4</button></li>
					</ul>
				</div>
			</li>
			<li class="col-md-3">
				<div class="outer">
					<div class="pic">
						<div class="img img3"></div>
					</div>
					<div class="title">
						<span>喵喵</span>
						<small>小喵喵</small>
					</div>
					<ul class="meun" layout="row stretch-stretch">
						<li><button>1</button></li>
						<li><button>2</button></li>
						<li><button>3</button></li>
						<li><button>4</button></li>
					</ul>
				</div>
			</li>
			<li class="col-md-3">
				<div class="outer">
					<div class="pic">
						<div class="img img4"></div>
					</div>
					<div class="title">
						<span>喵喵</span>
						<small>小喵喵</small>
					</div>
					<ul class="meun" layout="row stretch-stretch">
						<li><button>1</button></li>
						<li><button>2</button></li>
						<li><button>3</button></li>
						<li><button>4</button></li>
					</ul>
				</div>
			</li>
		</ul>
	</section>
</body>
</html>